<template>
    <div class="home" v-if="home">
        <!-- 顶部搜索 -->
        <div class="search">
            <img :src="home.logoUrl" alt="" />
            <van-search @focus="focus" v-model="value" shape="round" class="searchbox" placeholder="搜素商品" />
        </div>
        <!-- banner部分 -->
        <van-swipe :autoplay="2000" lazy-render class="banner" @change="onChange">
            <van-swipe-item v-for="image in home.banner" :key="image.id">
                <!-- <img :src="image.pic"  /> -->
                <img v-lazy="image.pic" />
            </van-swipe-item>
            <template #indicator>
                <ol class="custom-indicator">
                    <li v-for="(n, i) in home.banner" :key="i" :class="{ active: i == count }"></li>
                </ol>
            </template>
        </van-swipe>

        <!-- 商品分类部分 -->
        <div class="menus">
            <ul>
                <router-link :to="`/home/menus/${index}`" tag="li" v-for="(item, index) in home.menus" :key="item.id">
                    <img v-lazy="item.pic" alt="" />
                    <span>{{ item.name }}</span>
                </router-link>
            </ul>
        </div>

        <!-- 新闻简报部分 -->
        <div class="roll">
            <div>
                <!-- <em>新闻简报</em> -->
                <img src="../assets/image/journa.png" alt="" />
            </div>
            <van-swipe vertical :autoplay="3000" class="vertical" :touchable="false" :show-indicators="false">
                <van-swipe-item class="vertical-item iconfont" v-for="item in home.roll" :key="item.id">
                    {{ item.info }}
                </van-swipe-item>
            </van-swipe>
        </div>

        <!-- 快速选择 -->
        <van-cell title="快速选择" to="/category" value="更多" is-link class="van-cell-item" title-class="left-cell" value-class="right-cell" />
        <van-swipe class="fastList" v-if="home.info" :loop="false" :width="100" :show-indicators="false">
            <van-swipe-item class="fastList-item" v-for="(item, index) in home.info.fastList" :key="item.id">
                <router-link :to="`/categoryson/${item.id}/${item.cate_name}`">
                    <img :src="item.pic" alt="" />
                    <span :class="[{ active: index % 1 == 0 }, { active2: index % 2 == 0 }, { active3: index % 3 == 0 }]">{{ item.cate_name }}</span>
                </router-link>
            </van-swipe-item>
        </van-swipe>
        <hr class="hr" />

        <!--精品推荐  -->
        <van-cell title="精品推荐" is-link to="/groom/1" value="更多" class="van-cell-item" title-class="left-cell" value-class="right-cell" />
        <van-swipe :autoplay="3000" v-if="home.info" class="bastBanner" @change="onChange2">
            <van-swipe-item v-for="item in home.info.bastBanner" class="bastBanner-item" :key="item.id">
                <img :src="item.img" alt="" />
            </van-swipe-item>

            <template #indicator>
                <ol class="custom-indicator2">
                    <li v-for="(n, i) in home.info.bastBanner" :key="i" :class="{ active: i == count2 }"></li>
                </ol>
            </template>
        </van-swipe>
        <article-view v-if="home.info" :article="home.info.bastList"></article-view>

        <!-- 热门榜单 -->
        <div class="hot">
            <router-link class="top" to="/groom/2" tag="div">
                <div>
                    <h3>热门榜单</h3>
                    <h4>根据销量、搜索、好评等综合得出</h4>
                </div>
                <span class="iconfont">更多</span>
            </router-link>
            <div class="bottom">
                <router-link tag="div" v-for="(item, index) in home.likeInfo" :key="item.id" :to="`/details/${item.id}`">
                    <img :src="item.image" alt="" />
                    <h3>{{ item.store_name }}</h3>
                    <h2>￥{{ item.price }}{{ index }}</h2>
                </router-link>
            </div>
        </div>
        <van-cell title="首发新品" is-link to="/groom/3" value="更多" class="van-cell-item" title-class="left-cell" value-class="right-cell" />
        <van-swipe :loop="false" :width="155" class="newList" :show-indicators="false">
            <van-swipe-item v-for="item in news" class="newList-item" :key="item.id">
                <router-link :to="`/details/${item.id}`">
                    <img :src="item.image" alt="" />

                    <div class="box">
                        <span>{{ item.store_name }}</span>
                        <p>￥{{ item.price }}</p>
                    </div>
                </router-link>
            </van-swipe-item>
        </van-swipe>
        <hr class="hr" />

        <van-cell title="促销单品" is-link to="/promotion" value="更多" title-class="left-cell" value-class="right-cell" />
        <router-link :to="`/details/${item.id}`" class="benefit" v-for="item in home.benefit" :key="item.id">
            <img :src="item.image" alt="" />
            <div class="right">
                <span class="top">{{ item.store_name }}</span>
                <div>促销价{{ item.price }}</div>
                <p>
                    <span>日常价： ￥{{ item.ot_price }}</span>
                    <i>仅剩: {{ item.stock }}{{ item.unit_name }}</i>
                </p>
            </div>
        </router-link>
    </div>
</template>

<script>
import ArticleView from "../components/ArticleView.vue";
export default {
    name: "HomeView",
    components: { ArticleView },
    data() {
        return {
            home: {},
            news: [],
            value: "",
            count: 0,
            count2: 0,
        };
    },
    methods: {
        // 主页数据
        getHome() {
            this.axios.get("/index").then((re) => {
                // console.log(re);
                this.home = re;
            });
        },
        // 主页第一个轮播拿到高亮的下标
        onChange(index) {
            this.count = index;
        },
        // 精品推荐拿到高亮的下标
        onChange2(index) {
            this.count2 = index;
        },
        // 首发新品数据
        getNew() {
            this.axios.get("/groom/list/3?page=1&limit=10").then((re) => {
                // console.log("首发新品", re);
                this.news = re.list;
            });
        },
        // 搜索
        focus() {
            // console.log(123);
            this.$router.push("/search");
        },
    },
    created() {
        this.getHome();
        this.getNew();
    },

    // 路由拦截
    // beforeRouteLeave(to, from, next) {
    //     console.log(to);
    //     let index = to.path.lastIndexOf("/");
    //     let count3 = to.path.substr(index + 1);
    //     console.log(count3);
    //     if (!count3 == 1 && !count3 == 2 && !count3 == 3 && !count3 == 4 && !count3 == 5) {
    //         return;
    //     } else {
    //         next();
    //         return;
    //     }
    // },
};
</script>
<style lang="scss" scoped>
.home {
    margin-bottom: 50px;
    .search {
        height: 49px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 20px;
        img {
            width: 63.5px;
            height: 22.5px;
        }
        .searchbox {
            flex: 1;
            width: 5rem;
            height: 0.64rem;
        }
    }
    // 轮播
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #016eb3;
    }
    .banner {
        img {
            width: 100vw;
            height: 187.5px;
        }
    }
    .custom-indicator {
        position: absolute;
        bottom: 5px;
        left: 50%;

        transform: translate(-50%, 0);
        padding: 2px 5px;
        display: flex;
        li {
            width: 10px;
            height: 2px;
            background: #ccc;
            opacity: 0.5;
            margin: 0 5px;
            transition: opacity 0.5s linear;
            &.active {
                opacity: 1;
                background: #fff;
            }
        }
    }

    // 分类
    .menus {
        ul {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            li {
                width: 25vw;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-top: 5.5px;
                img {
                    width: 45px;
                }
                span {
                    font-size: 13px;
                    color: #333;
                    margin: 12px 0 17px 0;
                }
            }
        }
    }
    // 新闻
    .roll {
        display: flex;
        align-items: center;
        height: 38.5px;
        border-top: 0.2px solid rgba(180, 175, 175, 0.2);
        border-bottom: 0.2px solid rgba(192, 189, 189, 0.2);
        img {
            width: 62px;
            height: 14px;
        }
        div {
            font-size: 14px;
            padding: 0 10px;
            padding-right: 10px;
            border-right: 0.5px solid rgba(149, 146, 146, 0.5);
            // border: 1px solid red;
        }
        .vertical {
            flex: 1;
            border: none;
            // padding-left: 5px;
            height: 38.5px;
            .vertical-item {
                font-size: 12px;
                display: flex;
                // justify-content: flex-start;
                align-items: center;
                position: relative;
                font-size: 12px;
                color: #666;
                text-indent: 0px;
                // border: 1px solid red;
                &::after {
                    content: "\e668";
                    width: 20px;
                    height: 20px;
                    color: #666;
                    position: absolute;
                    top: 50%;
                    right: 7%;
                    font-size: 15px;
                    transform: translateY(-50%);
                }
            }
        }
    }
    // 快速选择
    .fastList {
        display: flex;
        align-items: center;
        .fastList-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 6px;
            img {
                width: 90px;
                height: 90px;
                padding: 0 6px;
            }
            span {
                display: block;
                font-size: 12px;
                width: 100%;
                text-align: center;
                padding-top: 10px;
                line-height: 20px;
                border-left: 0.5px solid rgba(149, 146, 146, 0.1);
                border-right: 0.5px solid rgba(149, 146, 146, 0.1);
                &.active {
                    border-bottom: 2px solid green;
                }
                &.active2 {
                    border-bottom: 2px solid blue;
                }
                &.active3 {
                    border-bottom: 2px solid red;
                }
            }
        }
    }
    .hr {
        margin-top: 20px;
        margin-bottom: 10px;
        background: transparent;
        border: none;
        border-bottom: 0.5px solid rgb(232, 225, 225);
    }
    //精品推荐
    .bastBanner {
        padding: 0px 10px 10px 10px;
        transform: translateY(-10px);
        img {
            width: 345px;
            height: 130px;
        }
        .custom-indicator2 {
            position: absolute;
            left: 50%;
            bottom: 0%;
            display: flex;
            align-items: center;
            justify-content: center;
            li {
                margin-right: 5px;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                transform: translateX(-100%);
                background: red;
                &.active {
                    width: 8px;
                    height: 5px;
                    border-radius: 12px;
                    background: red;
                }
            }
        }
    }
    // 热门榜单
    .hot {
        width: 100vw;
        margin: 0 auto;
        height: 208.5px;
        background: url("../assets/image/hotbj.png") no-repeat center center / cover;
        .top {
            display: flex;
            justify-content: space-between;
            div {
                display: flex;
                color: #fff;
                justify-content: space-between;
                height: 43.5px;
                line-height: 43.5px;
                margin-left: 10px;
                h3 {
                    font-size: 16px;
                    margin-right: 10px;
                    font-weight: 700;
                }
                h4 {
                    font-size: 12px;
                }
            }
            span {
                font-size: 16px;
                color: #fff;
                margin: 10px 25px 10px 10px;
                position: relative;
                &::after {
                    content: "\e668";
                    width: 20px;
                    height: 20px;
                    font-size: 14px;
                    position: absolute;
                    right: -20px;
                    top: 1px;
                }
            }
        }
        .bottom {
            margin: 0px 10px 0 10px;
            display: flex;
            width: 95%;
            justify-content: space-between;
            background: #fff;
            border-radius: 15px;
            border: 1px solid rgba(129, 127, 127, 0.5);
            div {
                margin: 10px;
                display: flex;
                flex-direction: column;
                img {
                    width: 100px;
                    height: 100px;
                    border-radius: 15px;
                }
                h3 {
                    font-size: 14px;
                    width: 100px;
                    margin-top: 10px;
                    word-break: keep-all; /* 不换行 */
                    white-space: nowrap; /* 不换行 */
                    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
                    text-overflow: ellipsis; /* 溢出时显示省略标记...；需与overflow:hidden;一起使用*/
                }
                h2 {
                    font-size: 16px;
                    color: red;
                    font-weight: 700;
                }
            }
        }
    }
    // 首发新品
    .new {
        // color: red;
        position: relative;
        &::after {
            content: "NEW~";
            position: absolute;
            top: 0.02rem;
            right: -65%;
            font-size: 0.16rem;
            font-weight: 700;
            color: red;
        }
    }
    .newList {
        .newList-item {
            width: 150px !important;
            // border: 1px solid red;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img {
                width: 119.5px;
                height: 120px;
                border-top-left-radius: 12px;
                border-top-right-radius: 12px;
            }
            .box {
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                border: 0.5px solid rgba(129, 127, 127, 0.5);
                border-top: none;
                border-bottom-right-radius: 12px;
                border-bottom-left-radius: 12px;
                span {
                    font-size: 14px;
                    width: 100px;
                    margin-top: 10px;
                    word-break: keep-all; /* 不换行 */
                    white-space: nowrap; /* 不换行 */
                    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
                    text-overflow: ellipsis; /* 溢出时显示省略标记...；需与overflow:hidden;一起使用*/
                }
                p {
                    font-size: 14px;
                    font-weight: 700;
                    color: red;
                    margin: 5px 0 10px 0;
                }
            }
        }
    }
    // 促销单品
    .benefit {
        display: flex;
        margin: 0px 10px;
        border-bottom: 1px solid rgba(129, 127, 127, 0.1);
        transform: translateY(-10px);
        img {
            width: 94px;
            height: 94px;
            margin: 10px 0 15px 0;
            border-radius: 12px;
            margin-right: 10px;
        }
        div {
            display: flex;
            height: 94px;
            justify-content: space-between;
            flex-direction: column;
            .top {
                font-size: 16px;
                width: 250px;
                margin-top: 10px;
                word-break: keep-all; /* 不换行 */
                white-space: nowrap; /* 不换行 */
                overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
                text-overflow: ellipsis; /* 溢出时显示省略标记...；需与overflow:hidden;一起使用*/
            }
            div {
                font-size: 12px;
                height: 20px;
                line-height: 20px;
                width: 127.5px;
                text-align: center;
                color: #fff;
                background: #ff5437;
                border-top-left-radius: 12px;
                border-bottom-right-radius: 12px;
            }
            p {
                width: 100%;
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                color: rgb(144, 139, 139);
                span {
                    text-decoration: line-through;
                }
            }
        }
    }

    // 更多条
    .van-cell-item {
        margin-bottom: 15px;
    }
    .left-cell {
        font-weight: 700;
        font-size: 16;
    }
    .right-cell {
        color: black;
    }
}
</style>
